织梦cms| 帝国cms| WordPress discuz| phpcms| z-blog| ecshop| 其他cms|

WordPress

推荐列表 站点导航

当前位置：首页 > 建站教程 > WordPress >

three.js 制作动态二维码的示例代码

来源:网络整理  作者:  发布时间:2020-12-17 15:56
今天小编说一下用canvas解析图片流，然后制作一个动态二维码的小案例，话不多说先上图，这是微信二维码哦！1.解析...

这部分只是用了tween的基础功能，请自行查看tween文档。

以上就是three.js 制作动态二维码的示例代码的详细内容，希望大家多多支持！

canvas.width = 310;//设置尺寸

for (var j = 0; j < 310; j++) {

}

tween2.onUpdate(onUpdate);

imgData = content.getImageData(0, 0, canvas.width, canvas.height).data;//获取画布数据

imgData是什么样的呢？如下图

three.js 制作动态二维码的示例代码 (https://www.wpmee.com/) javascript教程 第2张

transparent: true,

for (var i = 0; i < 31 * 31; i++) {

img.src = require("../assets/images/base/wechat.png");//设置图片地址

for (var i = 0; i < color1.length; i++) {//31 * 31的循环

2. 处理像素点，画出二维码

tween1 = new TWEEN.Tween(pos).to({ time: 1 }, 3000);

var color = new Array(310).fill('').map(d => []);//color设置成310个数组

}

let time = this._object.time;

group.add(mesh);//将所有小平面放到数组，便于操作。

tween2 = new TWEEN.Tween(pos).to({ time: 0 }, 3000);

});

var material = new THREE.MeshBasicMaterial({

let clr = imgData[(i * 310 + j) * 4] + imgData[(i * 310 + j) * 4 + 1] + imgData[(i * 310 + j) * 4 + 2];

color: 0xffffff,

}

three.js 制作动态二维码的示例代码 (https://www.wpmee.com/) javascript教程 第3张

var color1 = [];//设置color1为小平面颜色数组31 * 31。

};  

content.drawImage(img, 0, 0, canvas.width, canvas.height);//将图片添加到画布，并设置宽高

//在图片加载后

var pos = { time: 0 };

canvas.height = 310;

这部分代码主要是计算部分，没什么技术含量。

d.position.set(time * origin_position[i][0] + (1 - time) * random_position[i][0], time * origin_position[i][1] + (1 - time) * random_position[i][1], (1 - time) * random_position[i][2]);

}  

tween1.start();

tween2.easing(TWEEN.Easing.Quadratic.Out);

这是一个Uint8ClampedArray的类型化数组，这个数组出现最多的也是在imgData上。它会将负数归入0，大于255的数归入255，所以取模就不用了。我们再来看这个数组的长度是384400是怎么来的呢？因为我们设置了画布长宽为310，而imgData四位代表一个rgba像素点，也就是imgData[0]是红色通道，imgData[1]是绿色通道，imgData[2]是蓝色通道，imgData[3]是透明通道…依次循环，所以310 * 310 * 4 = 384400。

tween1.easing(TWEEN.Easing.Quadratic.In);

function onUpdate() {

mesh.name = 'plane';

side: THREE.DoubleSide,

color.filter((d, i) => (i + 6) % 10 == 0).forEach((dd, ii) => color1[ii] = dd.filter((d, i) => (i + 6) % 10 == 0));//每10个像素，筛选出1个像素作为小平面的颜色，选取的位置尽量在10个的中间选择，毕竟有的图片比较模糊。

content = canvas.getContext('2d');//获取画布的上下文

color[i].push(clr)//每个数组有310项，每项的值为'light'或者'black'

tween1.onUpdate(onUpdate);

random_position.push([Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150)])

}

opacity: color1[i][j] == 'black' ? 0 : 1,

for (var j = 0; j < color1[i].length; j++) {

mesh.position.set(random_position[j + i * j][0], random_position[j + i * j][1], random_position[j + i * j][2]);//先将小方块的位置设置成打乱的位置，便于动画播放。

origin_position.push([j * 10 - 15 * 10, 15 * 10 - i * 10, 0]);//保存序列换后小方块的位置

canvas = document.createElement('canvas');//创建canvas画布

group.children.forEach((d, i) => {

var geometry = new THREE.PlaneGeometry(10, 10);

1. 解析图片流

})

}

img.onload = () => {

今天小编说一下用canvas解析图片流，然后制作一个动态二维码的小案例，话不多说先上图，这是微信二维码哦！

three.js 制作动态二维码的示例代码 (https://www.wpmee.com/) javascript教程 第1张

for (var i = 0; i < 310; i++) {

var mesh = new THREE.Mesh(geometry, material);//小方块网格

//random_position为各个小平面块打乱时的位置信息，我设置小平面一共有31 * 31个

3. 实现tween动画

img = new Image();//创建一张图片

scene.add(group);  

clr = clr > 382 ? 'light' : 'black'; //因为颜色是有深色块和浅色块组成，他们的分界就是rgb通道颜色值之和小于等于127+127+127之和。

相关热词：

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jz/wp/4867.shtml

上一篇：Vue登录拦截 登录后继续跳
下一篇：网站快速排名要怎么优化
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程
最新文章
ludou_se_only); } add_action(s ludou_se_only); } add_action(s

时间：2021-01-23

所以经常导致输错密码的 所以经常导致输错密码的

时间：2021-01-23

WordPress措施打开速度慢的 WordPress措施打开速度慢的

时间：2021-01-22

WordPress回覆评论自动添加 WordPress回覆评论自动添加

时间：2021-01-22

我们可以通过下面的代码 我们可以通过下面的代码

时间：2021-01-22

如何修改WordPress默认脚色 如何修改WordPress默认脚色

时间：2021-01-20

同样的修改文件就行 同样的修改文件就行

时间：2021-01-20

少数善意的转载者既使没 少数善意的转载者既使没

时间：2021-01-20

热门文章
WordPress新手安装教程(图文) WordPress新手安装教程(图文)

时间：2020-12-28

在设置菜单中增加WordPress私密 隐藏的全部 在设置菜单中增加WordPress私密 隐藏的全部

时间：2021-01-10

WordPress博客程序常见错误的解决方法 WordPress博客程序常见错误的解决方法

时间：2020-12-28

WordPress程序打开速度慢的三种解决方法 WordPress程序打开速度慢的三种解决方法

时间：2021-01-10

wordpress使用代码在每篇文章尾部添加版权 wordpress使用代码在每篇文章尾部添加版权

时间：2020-12-14

WordPress博客措施常见错误的办理要领 WordPress博客措施常见错误的办理要领

时间：2021-01-15

关于WordPress的SEO优化相关的一些PHP页面脚 关于WordPress的SEO优化相关的一些PHP页面脚

时间：2021-01-07

WordPress措施打开速度慢的三种办理要领 WordPress措施打开速度慢的三种办理要领

时间：2021-01-22

详解WordPress中的头像缓存和署理中的缓存 详解WordPress中的头像缓存和署理中的缓存

时间：2021-01-15

少数善意的转载者既使没有看到版权信息 少数善意的转载者既使没有看到版权信息

时间：2021-01-20

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

three.js 制作动态二维码的示例代码

2020-12-17　编辑：

这部分只是用了tween的基础功能，请自行查看tween文档。

以上就是three.js 制作动态二维码的示例代码的详细内容，希望大家多多支持！

canvas.width = 310;//设置尺寸

for (var j = 0; j < 310; j++) {

}

tween2.onUpdate(onUpdate);

imgData = content.getImageData(0, 0, canvas.width, canvas.height).data;//获取画布数据

imgData是什么样的呢？如下图

three.js 制作动态二维码的示例代码 (https://www.wpmee.com/) javascript教程 第2张

transparent: true,

for (var i = 0; i < 31 * 31; i++) {

img.src = require("../assets/images/base/wechat.png");//设置图片地址

for (var i = 0; i < color1.length; i++) {//31 * 31的循环

2. 处理像素点，画出二维码

tween1 = new TWEEN.Tween(pos).to({ time: 1 }, 3000);

var color = new Array(310).fill('').map(d => []);//color设置成310个数组

}

let time = this._object.time;

group.add(mesh);//将所有小平面放到数组，便于操作。

tween2 = new TWEEN.Tween(pos).to({ time: 0 }, 3000);

});

var material = new THREE.MeshBasicMaterial({

let clr = imgData[(i * 310 + j) * 4] + imgData[(i * 310 + j) * 4 + 1] + imgData[(i * 310 + j) * 4 + 2];

color: 0xffffff,

}

three.js 制作动态二维码的示例代码 (https://www.wpmee.com/) javascript教程 第3张

var color1 = [];//设置color1为小平面颜色数组31 * 31。

};  

content.drawImage(img, 0, 0, canvas.width, canvas.height);//将图片添加到画布，并设置宽高

//在图片加载后

var pos = { time: 0 };

canvas.height = 310;

这部分代码主要是计算部分，没什么技术含量。

d.position.set(time * origin_position[i][0] + (1 - time) * random_position[i][0], time * origin_position[i][1] + (1 - time) * random_position[i][1], (1 - time) * random_position[i][2]);

}  

tween1.start();

tween2.easing(TWEEN.Easing.Quadratic.Out);

这是一个Uint8ClampedArray的类型化数组，这个数组出现最多的也是在imgData上。它会将负数归入0，大于255的数归入255，所以取模就不用了。我们再来看这个数组的长度是384400是怎么来的呢？因为我们设置了画布长宽为310，而imgData四位代表一个rgba像素点，也就是imgData[0]是红色通道，imgData[1]是绿色通道，imgData[2]是蓝色通道，imgData[3]是透明通道…依次循环，所以310 * 310 * 4 = 384400。

tween1.easing(TWEEN.Easing.Quadratic.In);

function onUpdate() {

mesh.name = 'plane';

side: THREE.DoubleSide,

color.filter((d, i) => (i + 6) % 10 == 0).forEach((dd, ii) => color1[ii] = dd.filter((d, i) => (i + 6) % 10 == 0));//每10个像素，筛选出1个像素作为小平面的颜色，选取的位置尽量在10个的中间选择，毕竟有的图片比较模糊。

content = canvas.getContext('2d');//获取画布的上下文

color[i].push(clr)//每个数组有310项，每项的值为'light'或者'black'

tween1.onUpdate(onUpdate);

random_position.push([Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150)])

}

opacity: color1[i][j] == 'black' ? 0 : 1,

for (var j = 0; j < color1[i].length; j++) {

mesh.position.set(random_position[j + i * j][0], random_position[j + i * j][1], random_position[j + i * j][2]);//先将小方块的位置设置成打乱的位置，便于动画播放。

origin_position.push([j * 10 - 15 * 10, 15 * 10 - i * 10, 0]);//保存序列换后小方块的位置

canvas = document.createElement('canvas');//创建canvas画布

group.children.forEach((d, i) => {

var geometry = new THREE.PlaneGeometry(10, 10);

1. 解析图片流

})

}

img.onload = () => {

今天小编说一下用canvas解析图片流，然后制作一个动态二维码的小案例，话不多说先上图，这是微信二维码哦！

three.js 制作动态二维码的示例代码 (https://www.wpmee.com/) javascript教程 第1张

for (var i = 0; i < 310; i++) {

var mesh = new THREE.Mesh(geometry, material);//小方块网格

//random_position为各个小平面块打乱时的位置信息，我设置小平面一共有31 * 31个

3. 实现tween动画

img = new Image();//创建一张图片

scene.add(group);  

clr = clr > 382 ? 'light' : 'black'; //因为颜色是有深色块和浅色块组成，他们的分界就是rgb通道颜色值之和小于等于127+127+127之和。

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供学习参考！
本文地址为 https://v30.fanwenzhu.com/jz/wp/4867.shtml

相关文章

风云图片

ludou_se_only); } add_action(s

ludou_se_only); } add_action(s

所以经常导致输错密码的

所以经常导致输错密码的

WordPress措施打开速度慢的

WordPress措施打开速度慢的

WordPress回覆评论自动添加

WordPress回覆评论自动添加

我们可以通过下面的代码

我们可以通过下面的代码

如何修改WordPress默认脚色

如何修改WordPress默认脚色

推荐阅读

返回WordPress频道首页